<template>
  <div id="world"></div>
</template>

<script setup>
import * as THREE from 'three'
import Bird from '@/components/Bird'
import { onMounted } from 'vue'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 3000)
camera.position.set(0, 500, 500)
camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

// 初始化坐标系
const axesHelper = new THREE.AxesHelper(200)
// 添加坐标系
scene.add(axesHelper)

// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.minPolarAngle = 0
controls.maxPolarAngle = Math.PI * 0.48

// 绑定控制器（更新渲染器）
controls.addEventListener('change', () => {
  renderer.render(scene, camera)
})

const light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.5)

const shadowLight = new THREE.DirectionalLight(0xffffff, 0.8)
shadowLight.position.set(200, 200, 200)
shadowLight.castShadow = true
shadowLight.shadowDarkness = 0.2

const backLight = new THREE.DirectionalLight(0xffffff, 0.4)
backLight.position.set(-100, 200, 50)
backLight.shadowDarkness = 0.1
backLight.castShadow = true

scene.add(backLight)
scene.add(light)
scene.add(shadowLight)

onMounted(() => {
  window.addEventListener('resize', onWindowResize, false)
  document.addEventListener('mousemove', handleMouseMove, false)
  document.addEventListener('touchstart', handleTouchStart, false)
  document.addEventListener('touchend', handleTouchEnd, false)
  document.addEventListener('touchmove', handleTouchMove, false)

  document.querySelector('#world').appendChild(renderer.domElement)
  createBirds()
  animate()
  onWindowResize()
})

let WIDTH
let HEIGHT
let windowHalfX
let windowHalfY
let mousePos = { x: 0, y: 0 }

function onWindowResize() {
  WIDTH = window.innerWidth
  HEIGHT = window.innerHeight
  windowHalfX = WIDTH / 2
  windowHalfY = HEIGHT / 2
  renderer.setSize(WIDTH, HEIGHT)
  camera.aspect = WIDTH / HEIGHT
  camera.updateProjectionMatrix()
}
function handleMouseMove(event) {
  mousePos = { x: event.clientX, y: event.clientY }
}

function handleTouchStart(event) {
  if (event.touches.length > 1) {
    event.preventDefault()
    mousePos = { x: event.touches[0].pageX, y: event.touches[0].pageY }
  }
}

function handleTouchEnd(event) {
  mousePos = { x: windowHalfX, y: windowHalfY }
}

function handleTouchMove(event) {
  if (event.touches.length === 1) {
    event.preventDefault()
    mousePos = { x: event.touches[0].pageX, y: event.touches[0].pageY }
  }
}

let bird1, bird2, bird3
const createBirds = () => {
  bird1 = new Bird()
  bird1.threegroup.position.x = 0
  scene.add(bird1.threegroup)

  bird2 = new Bird()
  bird2.threegroup.position.x = -250
  bird2.side = 'right'
  bird2.threegroup.scale.set(0.8, 0.8, 0.8)
  bird2.threegroup.position.y = -8
  scene.add(bird2.threegroup)

  bird3 = new Bird()
  bird3.threegroup.position.x = 250
  bird3.side = 'left'
  bird3.threegroup.scale.set(0.8, 0.8, 0.8)
  bird3.threegroup.position.y = -8
  scene.add(bird3.threegroup)
}
const birdAnimate = () => {
  const tempHA = (mousePos.x - windowHalfX) / 200
  const tempVA = (mousePos.y - windowHalfY) / 200
  const userHAngle = Math.min(Math.max(tempHA, -Math.PI / 3), Math.PI / 3) || 0
  const userVAngle = Math.min(Math.max(tempVA, -Math.PI / 3), Math.PI / 3) || 0
  bird1.look(userHAngle, userVAngle)

  if (bird1.hAngle < -Math.PI / 5 && !bird2.intervalRunning) {
    bird2.lookAway(true)
    bird2.intervalRunning = true
    bird2.behaviourInterval = setInterval(function () {
      bird2.lookAway(false)
    }, 1500)
  } else if (bird1.hAngle > 0 && bird2.intervalRunning) {
    bird2.stare()
    clearInterval(bird2.behaviourInterval)
    bird2.intervalRunning = false
  } else if (bird1.hAngle > Math.PI / 5 && !bird3.intervalRunning) {
    bird3.lookAway(true)
    bird3.intervalRunning = true
    bird3.behaviourInterval = setInterval(function () {
      bird3.lookAway(false)
    }, 1500)
  } else if (bird1.hAngle < 0 && bird3.intervalRunning) {
    bird3.stare()
    clearInterval(bird3.behaviourInterval)
    bird3.intervalRunning = false
  }

  bird2.look(bird2.shyAngles.h, bird2.shyAngles.v)
  bird2.bodyBird.material.color.setRGB(bird2.color.r, bird2.color.g, bird2.color.b)

  bird3.look(bird3.shyAngles.h, bird3.shyAngles.v)
  bird3.bodyBird.material.color.setRGB(bird3.color.r, bird3.color.g, bird3.color.b)
}

function animate() {
  birdAnimate()
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}
</script>
